import React, { useState } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";

const FilterSection = (props) => {
  const [selectedtag, setSelectedTag] = useState(props.selectedState);
  // console.log("slectedState", selectedtag);
  return (
    <View style={styles.modalView}>
      <View style={styles.modalTitle}>
        <Text style={styles.modalTitleText}>{props.title}</Text>
      </View>
      <View style={styles.modalList}>
        {props.tagList.length === 0 ? (
          <View style={{ flex: 1 }}>
            <Text style={{ textAlign: "center" }}>请先选择类别</Text>
          </View>
        ) : (
          props.tagList.map((tag, index) => {
            return (
              <TouchableOpacity
                style={
                  index === selectedtag ? styles.selectedItem : styles.tagItem
                }
                key={index}
                onPress={() => {
                  let id = selectedtag === index ? -1 : index;
                  setSelectedTag(id);
                  props.selectedItem(props.index, id);
                }}
              >
                <Text style={styles.tagText}>{tag}</Text>
              </TouchableOpacity>
            );
          })
        )}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  modalView: {
    // backgroundColor: "#FAFFFB",
  },
  modalTitle: {
    marginTop: 5,
    // marginBottom: 5,
    marginLeft: 5,
  },
  modalTitleText: {
    padding: 4,
    fontSize: 15,
    fontWeight: "bold",
  },
  modalList: {
    flexDirection: "row",
    alignItems: "center",
    flexWrap: "wrap",
    marginLeft: 10,
    marginRight: 10,
    // backgroundColor: "blue",
  },
  tagItem: {
    borderRadius: 5,
    justifyContent: "center",
    backgroundColor: "#E6E7E8",
    marginRight: 10,
    marginBottom: 10,
    height: 30,
  },
  selectedItem: {
    borderRadius: 10,
    justifyContent: "center",
    backgroundColor: "#DBF1FF",
    marginRight: 10,
    marginBottom: 10,
    height: 30,
  },
  tagText: {
    justifyContent: "center",
    fontSize: 14,
    paddingLeft: 12,
    paddingRight: 12,
  },
});

export default FilterSection;
